<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/vue.global.js"></script>
</head>

<body>
    <div id="app">
        <div>
            <p>{{count}}</p>
            <button @click="addCount">点击</button>
        </div>
        <hr>
        <!-- <prop-test :count="count" @update:count="updateCountHandler"></prop-test> -->
        <!-- <prop-test :count.sync="count"></prop-test> -->

        <prop-test v-model:title="count"></prop-test>
    </div>
</body>
<script>

    // 子传父
    // 1. 父组件传递数据  自定义事件(自定义事件携带改变数据的方法)
    // 2. 子组件接收数据, 自定义事件 => 必要时触发自定义事件 完成数据修改

    var { createApp } = Vue;

    


    var app = createApp({
        data() {
            return {
                count: 1,
            }
        },
        methods: {
            addCount(){
                this.count ++;
            },
            updateCountHandler(v) {
                this.count = v;
            }
        },
    })

    
    app.component("prop-test", {
        props: ["title"],
        emits:["update:title"],
        data() {
            return {
            }
        },
        computed: {

        },
        watch: {

        },
        template: `<div @click="$emit('update:title',title+1)">这是一个测试组件:{{title}}</div>`,
       
        mounted() {
            console.log(this);
        },
    })


    
    console.log(app);
    app.mount("#app");
   
   
  

</script>

</html>